// 导入基础库
import React, { useEffect } from 'react'
import { connect } from 'umi'
// 导入配置参数
import df from '../../../../config/dataFormat'
// 导入处理函数
import com from '../../../utils/common'
import xl from '../../../utils/xlsx'
// 导入UI组件
import { Button, Space, AutoComplete } from 'antd'
// 导入LESS样式
import styles from './setp.less'

const Setp = (props) => {
    // 初始化参数------------------------------------------------
    const { ui, table: tb, socketio: io, dispatch: dp } = props
    dp({ type: 'socketio/fetch' })
    // 公共函数
    useEffect(() => {
        document.addEventListener('drop', e => e.preventDefault(), false)
        document.addEventListener('dragover', e => e.preventDefault(), false)
    })

    const if_tag = () => {
        if (tb.table_bd_tags['姓名'].length !== 0 && tb.table_bd_tags['身份证号'].length !== 0 && tb.table_bd_tags['电话号码'].length !== 0 && tb.data_op) {
            return false
        } else {
            return true
        }
    }

    // 组件事件处理函数
    const save_tags = () => {
        xl.save_tags(tb, dp)
        dp({ type: 'ui/save', payload: { imp_tab_id: '3' } })
    }

    const onChang = (data_op) => {
        data_op = data_op || ''
        dp({ type: 'table/save', payload: { data_op } })
    }

    // 组件参数配置

    // 组件UI
    const Tag = (props) => {
        var { tag } = props
        tag = tag.substr(tag.length - 1, tag.length) === '-' ? tag : tag + "-"
        const methods = {
            onDragStart: e => {
                e.dataTransfer.setData("Text", e.target.id)
            },
            onDrag: e => {
                e.target.className = styles.tag_drag
            },
            onDragEnd: e => {
                e.target.className = styles.tag
            }
        }

        return (
            <span id={`${tag}`} className={styles.tag} {...methods} draggable>{tag}</span>
        )
    }

    const TableDrop = props => {
        const { tag, id } = props

        const methods = {
            onDrop: e => {
                com.setClassName(e.target, 'table_drop_box', styles.table_drop_box)
                var state = com.drop(e, df.table_cols[id].tags, tb, dp)
            },
            onDragOver: e => {
                com.setClassName(e.target, 'table_drop_box', styles.table_drop_box_over)
            },
            onDragLeave: e => {
                com.setClassName(e.target, 'table_drop_box', styles.table_drop_box)
            }
        }

        return (
            <div className={styles.table_tag}>
                <p className={styles.table_drop_title}>
                    {tag}
                    <span>
                        {tb.table_bd_tags[tag].length}
                        /
                        {df.table_cols[id].tags}
                    </span>
                </p>
                <div id={`${tag}`} className={styles.table_drop_box} {...methods}>
                    {tb.table_bd_tags[tag].map((tag, id) =>
                        <Tag key={id} tag={tag} />
                    )}
                </div>
            </div>
        )
    }

    return (
        <div>
            <Space className={styles.btn}>
                <span>数据来源:</span>
                <AutoComplete
                    allowClear
                    style={{ width: 150 }}
                    options={df.data_op}
                    value={tb.data_op}
                    placeholder="请输入一个数据来源"
                    filterOption={(inputValue, option) =>
                        option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
                    }
                    onChange={onChang}
                />
                <Button type="primary" disabled={if_tag()} onClick={save_tags}>已完成文件导入，进行下一步操作</Button>
            </Space>

            <div id={styles.file_tags} className={styles.file_tags} onDrop={e => com.drop(e, 100, tb, dp)}>
                {tb.imp_file_tags.map((tag, id) =>
                    <Tag key={id} tag={tag} />
                )}
            </div>
            <h3 style={{ textAlign: 'center', fontWeight: 100 }}>*请拖动上面的文件表头标签到下面对应的标签内，姓名、身份证、电话号码为必填项*</h3>
            <div size={10} className={styles.table_tags} >
                {df.table_cols_tags.map((tag, id) =>
                    <TableDrop key={id} tag={tag} id={id} />
                )}
            </div>
        </div>
    )
}

export default connect(
    ({ ui, table, socketio }) => ({ ui, table, socketio })
)(Setp)